<template>
  <div class="boderContainer">
    <div class="notch"></div>
    <div class="text">FUEL&nbsp;&nbsp;QTY</div>
    <div class="qty">
      <span style="font-weight: bold">69.0</span>
      <span style="font-weight: bold">182.6</span>
      <span style="font-weight: bold">68.9</span>
    </div>
    <div style="position: relative; display: flex">
      <div>
        <span style="color: rgb(173, 233, 246)">TOTAL&nbsp;FUEL</span>
        <span style="margin-left: 10px; font-size: 22px; font-weight: bold"
          >320.5</span
        >
      </div>
      <div
        style="
          display: flex;
          flex-direction: column;
          margin-top: 4px;
          margin-left: 10px;
        "
      >
        <span style="color: rgb(173, 233, 246)">LBS&nbsp;X</span>
        <span
          style="color: rgb(173, 233, 246); margin-top: -10px; margin-left: 3px"
          >1000</span
        >
      </div>
    </div>
    <div style="margin-top: -5px">
      <span style="color: rgb(173, 233, 246); margin-left: 50px">TEMP</span>
      <span style="font-weight: bold">+17c</span>
    </div>
  </div>
</template>

<style scoped>
.boderContainer {
  margin-top: 40px;
  position: relative;
  border: 3px solid rgb(173, 233, 246);
  border-radius: 5px;
  width: 200px;
  height: 40px;
}
.notch {
  position: absolute;
  top: -10px; /* 调整缺口位置 */
  left: 50%;
  transform: translateX(-50%); /* 使缺口居中 */
  width: 80px; /* 缺口宽度 */
  height: 20px; /* 缺口高度 */
  background-color: #202127; /* 缺口背景与内容区一致 */
}

.text {
  position: absolute;
  top: -12px; /* 调整文字位置 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px; /* 字体大小 */
  color: rgb(173, 233, 246); /* 字体颜色 */
}
.qty {
  top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px; /* 设置上内边距 */
  display: flex;
  justify-content: space-between;
}
</style>
